<template>
  <div class="lifecycle-child">
    <div class="child-header">
      <h5 class="child-title">子组件已加载</h5>
      <div class="child-props">
        Props 计数器: <span class="props-value">{{ counter }}</span>
      </div>
    </div>

    <div class="child-content">
      <div class="child-state">
        <div class="state-item">
          <label>内部状态:</label>
          <span class="state-value">{{ internalState }}</span>
          <button @click="internalState++" class="btn-increment">+</button>
        </div>

        <div class="state-item">
          <label>组件 ID:</label>
          <span class="state-value">{{ componentId }}</span>
        </div>
      </div>

      <div class="child-actions">
        <button @click="triggerUpdate" class="btn-update">触发更新</button>
        <button @click="simulateError" class="btn-error">模拟错误</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  onBeforeMount,
  onMounted,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  watch,
  nextTick,
} from 'vue'

// Props
interface Props {
  counter: number
}

const props = defineProps<Props>()

// Emits
const emit = defineEmits<{
  lifecycleEvent: [event: { type: string; message: string }]
}>()

// 子组件状态
const internalState = ref(0)
const componentId = ref(Math.random().toString(36).substr(2, 9))
let isChildUpdating = false

// 触发更新
const triggerUpdate = () => {
  internalState.value++
  emit('lifecycleEvent', {
    type: 'user-action',
    message: `子组件内部状态更新为 ${internalState.value}`,
  })
}

// 模拟错误
const simulateError = () => {
  emit('lifecycleEvent', {
    type: 'error',
    message: '子组件模拟错误场景',
  })
}

// 监听 props 变化
watch(
  () => props.counter,
  (newValue, oldValue) => {
    emit('lifecycleEvent', {
      type: 'props-change',
      message: `Props 从 ${oldValue} 变为 ${newValue}`,
    })
  },
)

// 子组件生命周期钩子
onBeforeMount(() => {
  emit('lifecycleEvent', {
    type: 'onBeforeMount',
    message: `ID: ${componentId.value} 即将挂载`,
  })
})

onMounted(() => {
  emit('lifecycleEvent', {
    type: 'onMounted',
    message: `ID: ${componentId.value} 已挂载完成`,
  })
})

onUpdated(() => {
  // 避免在更新过程中重复触发
  if (isChildUpdating) return

  isChildUpdating = true
  nextTick(() => {
    emit('lifecycleEvent', {
      type: 'onUpdated',
      message: `ID: ${componentId.value} 已更新`,
    })
    isChildUpdating = false
  })
})

onBeforeUnmount(() => {
  emit('lifecycleEvent', {
    type: 'onBeforeUnmount',
    message: `ID: ${componentId.value} 即将卸载`,
  })
})

onUnmounted(() => {
  emit('lifecycleEvent', {
    type: 'onUnmounted',
    message: `ID: ${componentId.value} 已卸载`,
  })
})
</script>

<style scoped lang="scss">
.lifecycle-child {
  @apply bg-green-50 border border-green-200 rounded-lg p-4 min-w-[300px];
}

.child-header {
  @apply mb-4 pb-2 border-b border-green-200;
}

.child-title {
  @apply text-lg font-semibold text-green-800 mb-2;
}

.child-props {
  @apply text-sm text-green-700;
}

.props-value {
  @apply font-mono bg-green-100 px-2 py-1 rounded;
}

.child-content {
  @apply space-y-4;
}

.child-state {
  @apply space-y-2;
}

.state-item {
  @apply flex items-center space-x-2 text-sm;
}

.state-value {
  @apply font-mono bg-white px-2 py-1 rounded border;
}

.btn-increment {
  @apply w-6 h-6 bg-blue-500 text-white rounded text-xs hover:bg-blue-600;
}

.child-actions {
  @apply flex space-x-2;
}

.btn-update {
  @apply px-3 py-1 bg-blue-500 text-white rounded text-sm hover:bg-blue-600;
}

.btn-error {
  @apply px-3 py-1 bg-red-500 text-white rounded text-sm hover:bg-red-600;
}
</style>
